<template>
	<view class="container">
		<view class="tui-flex">
			<view v-if="coverFile != ''" class="tui-col-4 title">已选如下:</view>
			<view v-else class="tui-col-4 title">自定义上传</view>

			<view class="tui-col-8">
				<button v-if="coverFile != ''" class="tui-btn tui-btn-small tui-warning tui-fillet" hover-class="tui-warning-hover" @tap="chooseCoverImage">重新上传</button>
			</view>
		</view>
		<!-- <view class="title">
			自定义上传<label>重新上传</label>
		</view> -->
		<view class="box">
			<view v-if="coverFile != ''" :class="itemClassArray">
				<image :src="coverFile" style="width: 100%;border-radius: 2%;" mode="aspectFill" @tap="selectTargetForUpload"></image>
			</view>
			<!-- <tui-button v-else shape="circle" @tap="chooseCoverImage" class="tui-btm-small">点击上传</tui-button> -->
			<view v-else class="item-width-all-height400 tui-gray" @tap="chooseCoverImage">
				<view
					style="font-size:36rpx;height: 400rpx; display:flex; 
				justify-content:center; align-items:center;"
				>
					点击上传
				</view>
			</view>
		</view>
		<view class="title">选择模板</view>
		<view class="box-after">
			<view :class="defaultTtype=='default/type_1.jpg'?'item-width-all-height400 tui-primary':'item-width-all-height400'">
				<image
					style="width: 100%;border-radius: 2%;"
					:src="$cdn.actCoverImg + 'default/type_1.jpg'"
					@tap="selectTarget"
					data-src="default/type_1.jpg"
					mode="aspectFill"
				></image>
			</view>
			<view :class="defaultTtype=='default/type_2.jpg'?'item-width-all-height400 tui-primary':'item-width-all-height400'">
				<image
					style="width: 100%;border-radius: 2%;"
					:src="$cdn.actCoverImg + 'default/type_2.jpg'"
					@tap="selectTarget"
					data-src="default/type_2.jpg"
					mode="aspectFill"
				></image>
			</view>
			<view :class="defaultTtype=='default/type_3.jpg'?'item-width-all-height400 tui-primary':'item-width-all-height400'">
				<image
					style="width: 100%;border-radius: 2%;"
					:src="$cdn.actCoverImg + 'default/type_3.jpg'"
					@tap="selectTarget"
					data-src="default/type_3.jpg"
					mode="aspectFill"
				></image>
			</view>
			<view :class="defaultTtype=='default/type_4.jpg'?'item-width-all-height400 tui-primary':'item-width-all-height400'">
				<image
					style="width: 100%;border-radius: 2%;"
					:src="$cdn.actCoverImg + 'default/type_4.jpg'"
					@tap="selectTarget"
					data-src="default/type_4.jpg"
					mode="aspectFill"
				></image>
			</view>
		</view>

		<view class="tui-operation">
			<button class="btn-primary tui-btm-small" @tap="toGroupEdit"  hover-class="btn-hover" type="primary">确定</button>
		</view>
	</view>
</template>

<script>
import tuiButton from '@/components/button/button';
export default {
	computed: {
		getClassList(type) {
			if (this.defaultTtype == type) {
				return 'item-width-all-height400 tui-primary';
			} else {
				return 'item-width-all-height400';
			}
		},
	},
	components: {
		tuiButton
	},
	onLoad(data) {
		if (data.actId) {
			this.actId = data.actId;
		}
	},
	data() {
		return {
			$cdn: this.$cdn,
			// 群封面
			coverFile: '',
			coverFilePath: '',
			// default临时对象
			coverFileDefault: '',
			coverFilePathDefault: '',
			actId: '',
			// 上传图片专用
			itemClassArray: ['item-width-all-height400', 'tui-primary'],
			defaultTtype: ''
		};
	},
	methods: {
		/* getClassList(type) {
			if (this.defaultTtype == type) {
				return 'item-width-all-height400 tui-primary';
			} else {
				return 'item-width-all-height400';
			}
		}, */
		selectTargetForUpload() {
			let that = this;
			that.coverFileDefault = that.coverFile;
			that.coverFilePathDefault = '';
			// 样式增加选中，然后defaultType='';
			that.itemClassArray = ['item-width-all-height400', 'tui-primary'];
			that.defaultTtype = '';
		},
		selectTarget(e) {
			let src = e.target.dataset.src;
			this.coverFileDefault = this.$cdn.actCoverImg + src;
			this.coverFilePathDefault = src;
			console.log('coverFileDefault=' + this.coverFileDefault);
			console.log('coverFilePathDefault=' + this.coverFilePathDefault);
			// 样式控制
			// this.itemClassArray.push('tui-primary');
			this.defaultTtype = src;
			// 上传图片样式清除选中样式
			this.itemClassArray = ['item-width-all-height400'];
			// console.log('defaultTtype='+this.defaultTtype);
		},
		chooseCoverImage: function(e) {
			let that = this;
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: function(res) {
					console.log(JSON.stringify(res));
					that.coverFile = res.tempFilePaths[0];

					that.coverFileDefault = that.coverFile;
					that.coverFilePathDefault = '';
					// 样式增加选中，然后defaultType='';
					that.itemClassArray = ['item-width-all-height400', 'tui-primary'];
					that.defaultTtype = '';
					/* that.tui.reSizeImg(res.tempFilePaths[0], 456 * 1.5, 236 * 1.5, function(resImg) {
							that.actFile = resImg;
						}); */
				}
			});
		},
		toGroupEdit() {
			if (this.coverFileDefault == '') {
				this.tui.toast('请先选择封面图片');
				return false;
			}
			console.log('coverFileDefault=' + this.coverFileDefault);
			console.log('coverFilePathDefault=' + this.coverFilePathDefault);
			uni.navigateTo({
				url: '/pages/act/act-edit?coverFile=' + this.coverFileDefault + '&coverFilePath=' + this.coverFilePathDefault + '&actId=' + this.actId
			});
		}
	}
};
</script>

<style>
@import '../../static/style/thorui.css';

.container {
	padding: 30upx;
	box-sizing: border-box;
}

.title {
	/* padding: 14upx 0; */
	font-size: 32upx;
	color: #333;
	font-weight: bold;
}

.box {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	flex-direction: row;
	flex-wrap: wrap;
	box-sizing: border-box;
	/* margin-bottom: 100rpx; */
}

.box-after {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	flex-direction: row;
	flex-wrap: wrap;
	box-sizing: border-box;
	margin-bottom: 100rpx;
}

.item-width-all-height100 {
	width: 100%;
	height: 100rpx;
	/* line-height: 100rpx; */
	padding: 16upx 16upx;
	box-sizing: border-box;
	border-radius: 8upx;
	color: #fff;
	/* margin-bottom: 30upx; */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-size: 30upx;
}

.item-width-all-height400 {
	width: 100%;
	height: 400rpx;
	padding: 16upx 16upx;
	box-sizing: border-box;
	border-radius: 8upx;
	color: #fff;
	margin-bottom: 20upx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-size: 30upx;
}

.color {
	padding-top: 24upx;
}

.gray {
	color: #999 !important;
}

.tui-operation {
	width: 100%;
	height: 120rpx;
	overflow: hidden;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 99999;
	padding-bottom: 10rpx;
	/* padding-bottom: env(safe-area-inset-bottom); */
}
.tui-btm-small {
	/* height: 70rpx; */
	margin: 30rpx 30rpx 30rpx 30rpx;
	/* width: 50%; */
	/* font-size: 24rpx; */
	/* line-height: 70rpx; */
}
</style>
